<template>
    <div :class="'hidden-danger-wrap dialog-wrap ' +($Ctl.isCs(true)?'gradation-bg':'bg')">
        <div class="dialog-title">隐患整改</div>
        <div class="hidden-danger-desc">{{ baseInfo.hiddenDangerDesc }}</div>
        <div class="show-content">
            <div class="program-wrap">
                <!-- 文案 -->
                <div class="info-content">
                    <p class="value-text" :class="mapStates(baseInfo.status)">{{ mapStatesText(baseInfo.status) }}</p>
                    <p class="content-desc" v-show="baseInfo.updateTime">更新于{{ formateDate(baseInfo.updateTime, 'MM月dd日 hh:mm') }}</p>
                </div>
                <!-- 图 -->
                <div class="hidden-danger-img-wrap">
                    <img v-if="baseInfo.picUrls" class="hidden-danger-img" :src="baseInfo.picUrl">
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="card-bottom">
            <div class="hidden-danger-state">
                <img class="person-header-img" :src="personHeadImg || defaultUserHead">
                待【{{ personName }}】{{ mapStatesText(baseInfo.status).replace('待', '') }}
            </div>
            <div class="features-list">
                <!--电话-->
                <!-- <el-tooltip class="item" effect="dark" content="呼叫中心">
                    <div class="features-item iconfont icondapingtubiao_dianhua" @click="jumpCellCenter"></div>
                </el-tooltip> -->
                <el-tooltip class="item" effect="dark" content="详细信息">
                    <div class="features-item iconfont icondapingtubiao_xiangqing" @click="jumpHiddenDetail"><!--信息--></div>
                </el-tooltip>
            </div>
        </div>
    </div>
</template>
<script>
import { getHiddenDanger } from '@/api/hiddenDanger'
import util from '@/utils/util'

export default {
    props: {
        parames: {
            default () {
                return {}
            }
        }
    },
    data() {
        return {
            baseInfo: {
                status: 1
            },
            defaultUserHead: require('../../../assets/images/default/userHead.png'),
            personHeadImg: '',
            personName: '',
        }
    },
    created() {
        let that = this
        // 获取隐患数据
        that.getData()
    },
    methods: {
        mapStates(type) {
            let MAPLIST = {
                1: 'color-2', // 整改
                5: 'color-4', // 待指派
                3: 'color-6', // 核实
            }

            return MAPLIST[type]
        },
        mapStatesText(type) {
            let MAPLIST = {
                1: '整改', // 整改
                5: '待指派', // 待指派
                3: '核实', // 核实
            }
            return MAPLIST[type]
        },
        formateDate(time) {
            return util.ilinkTimeformat.format(new Date(time), 'MM月dd日 hh:mm')
        },
        dealPerson() {
            let that = this
            let status = that.baseInfo.status
            let personName = ''
            let personImg = ''

            if(status == 1) {
                personName = that.baseInfo.chargePersonName
                personImg = that.baseInfo.chargePersonHeadUrl
            } else if (status == 5) {
                personName = that.baseInfo.managerPersonName
                personImg = that.baseInfo.managerPersonHeadUrl
            } else if (status == 3) {
                personName = that.baseInfo.managerPersonName || that.baseInfo.createAccount
                personImg = that.baseInfo.managerPersonName ? that.baseInfo.managerPersonHeadUrl : that.baseInfo.createAccountHeadUrl
            }
            that.personHeadImg = personImg
            that.personName = personName
        },
        // 获取数据
        getData() {
            let that = this
            that.$Ctl.loading(1, 10000)
            getHiddenDanger({id: that.parames.id}).then(res => {
                if (res.status === 200) {
                    if(res.data.picUrls.split(',')[0].substring(res.data.picUrls.split(',')[0].length-4) == ".mp4" || res.data.picUrls.split(',')[0].substring(res.data.picUrls.split(',')[0].length-4) == ".3gp" || res.data.picUrls.split(',')[0].substring(res.data.picUrls.split(',')[0].length-5) == ".mpeg" || res.data.picUrls.split(',')[0].substring(res.data.picUrls.split(',')[0].length-7) == ".mavip4" || res.data.picUrls.split(',')[0].substring(res.data.picUrls.split(',')[0].length-4) == ".flv" || res.data.picUrls.split(',')[0].substring(res.data.picUrls.split(',')[0].length-4) == ".mov"){
                        res.data.picUrl = require('../../../assets/images/videoImgDetail/video_detail.png')
                    }else{
                        res.data.picUrl = res.data.picUrls.split(',')[0]
                    }
                    that.baseInfo = res.data
                    that.dealPerson()
                }
                that.$nextTick(() => {
                    that.$Ctl.loading(0)
                })
            })
        },
        // 跳转呼叫中心
        jumpCellCenter() {
            this.$Ctl.enterChild('CellCenter', {'orgId': this.baseInfo.orgId, 'userId': this.baseInfo.createAccount, 'userName': this.baseInfo.createAccountName})
        },
        // 跳转隐患详情
        jumpHiddenDetail() {
            let that = this
            that.$Ctl.enterDetail('HiddenDangers', { 
                orgId: that.baseInfo.orgId,
                id: that.baseInfo.id
            })
        }
    }
}
</script>
<style lang="scss">
.hidden-danger-wrap {
    .hidden-danger-desc {
        margin-top: 20px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        color: #A3BEDD;
        font-size: 20px;
    }
    .show-content {
        margin: 35px auto;
        width: 520px;
        height: 180px;
        background: url(../../../assets/images/dialogCards/content-bg.png) center center no-repeat;
        background-size: cover;
        .program-wrap {
            display: flex;
            height: 100%;
            align-items: center;
            .info-content {
                padding-top: 37px;
                width: 50%;
                height: 100%;
                text-align: center;
                .value-text {
                    height: 66px;
                    line-height: 66px;
                    font-size: 46px;
                    .units-text {
                        font-size: 20px;
                    }
                }
                .content-desc {
                    height: 40px;
                    line-height: 40px;
                    color: #FFF;
                    font-size: 18px;
                }
            }
            .hidden-danger-img-wrap {
                width: 50%;
                height: 100%;
                text-align: center;
                .hidden-danger-img {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                    padding: 1px;
                }
            }
        }
    }
    .card-bottom {
        display: flex;
        justify-content: space-between;
        width: 100%;
        .hidden-danger-state {
            display: flex;
            line-height: 38px;
            color: #3779E2;
            font-size: 20px;
            .person-header-img {
                margin-right: 15px;
                border-radius: 50%;
                width: 38px;
                height: 38px;
            }
        }
        .features-list {
            display: flex;
            .features-item {
                margin-left: 10px;
                width: 38px;
                height: 38px;
                line-height: 38px;
                color: #4699FF;
                text-align: center;
                font-size: 34px;
                cursor: pointer;
            }
        }
    }
}
</style>

